<template>
    <div id="address">
        <van-nav-bar title="地址管理" left-arrow @click-left="onClickLeft" />
        <div id="address_con">
            <div v-for="item in address" :key="item.id">
                <van-swipe-cell>
                    <div id="cell_left">
                        <div id="location">
                            <img src="@/assets/images/地址.png" alt="">
                        </div>
                        <div id="detail">
                            <p>
                                <span>{{ item.name }}</span>
                                &nbsp;
                                <span>{{ item.phone }}</span>
                            </p>
                            <p>
                                <span>{{ item.address }}</span>
                            </p>
                        </div>
                    </div>
                    <template #right>
                        <button class="delete-button" @click="console.log('删除了')">删除</button>
                    </template>

                </van-swipe-cell>
            </div>
        </div>
        <div id="footer">
            <button @click="router.push('/add_address')">新增地址</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const address = ref([
    {
        id: 1,
        name: '胡紫藤',
        phone: '123456789',
        address: '黄瓜省土豆市南瓜区888号'
    },
    {
        id: 2,
        name: '翟一',
        phone: '123456789',
        address: '苹果省西红柿市香蕉区999号'
    },
])
</script>

<style scoped>
#address {
    width: 100vw;
    height: 100vh;
    background: #f2f2f2;

    #address_con {
        width: 100%;
        height: 86%;

        #cell_left {
            width: 100%;
            height: 70px;
            background: white;
            margin-bottom: 10px;

            #location {
                width: 10%;
                height: 100%;
                float: left;

                img {
                    padding: 10px;
                    padding-top: 20px;
                }
            }

            #detail {
                width: 90%;
                height: 100%;
                float: right;
                font-size: 15px;

                p {
                    padding-top: 8px;
                    padding-left: 10px;

                }
            }
        }

        .delete-button {
            height: 100%;
            width:50px;
            background-color: red;
            border:none;
        }
    }

    #footer {
        width: 100%;
        height: 8%;
        background: #f2f2f2;
        button{
            width:95%;
            height:40px;
            background-color: #4678ff;
            margin-left:10px;
            border:none;
            border-radius: 10px;
            color:white;
        }
    }
}
</style>